<template>
  <tm-app theme="primary">
    <tm-navbar title="活动专区" :followTheme="true" :hideHome="true">
    </tm-navbar>
    <ad unit-id="adunit-851514706d1b080e" ad-type="video" ad-theme="white"></ad>

    <tm-sheet
      :margin="[20]"
      :padding="[20]"
      :round="4"
      v-if="state.catalog.length"
    >
      <tm-image
        :round="4"
        :width="getWidth(1)"
        :height="200"
        model="widthFix"
        :src="state.catalog[0].sysValue"
        @click="navigatorToMiniProgram"
      ></tm-image>
      <view class="flex flex-row flex-row-center-between mt-n5">
        <tm-image
          :round="4"
          model="widthFix"
          _class="flex-1"
          :width="getWidth(2)"
          :height="200"
          @click="navagatTo('/homePages/signIn')"
          :src="state.catalog[1].sysValue"
        ></tm-image>
        <tm-image
          :round="4"
          _class="flex-1"
          model="widthFix"
          @click="navagatTo('/shopPages/zero-dollars')"
          :height="200"
          :width="getWidth(2)"
          :src="state.catalog[2].sysValue"
        ></tm-image>
      </view>
    </tm-sheet>
  </tm-app>
</template>

<script setup>
import { getSysMarketingPicApi } from "@/api";
import { onLoad } from "@dcloudio/uni-app";
import { reactive } from "vue";
import { jumpAppId } from "@/config";
const state = reactive({
  catalog: [],
});

const getWidth = (type = 1) => {
  const { torpx, getWindow } = uni.$tm.u;
  if (type == 1) {
    return torpx(getWindow().width) - 80;
  }
  if (type == 2) {
    return (torpx(getWindow().width) - 80 - 20) / 2;
  }
};
const navagatTo = (url) => {
  uni.navigateTo({
    url,
  });
};

const navigatorToMiniProgram = () => {
  const path = state.catalog[0].sysRemark;
  if (!path) {
    return;
  }
  uni.navigateToMiniProgram({
    appId: jumpAppId,
    path,
    success: (res) => {},
  });
};

onLoad(async () => {
  state.catalog = await getSysMarketingPicApi();
});
</script>

<style scoped></style>
